import styled from 'styled-components';
import * as React from 'react';
import { AccountSettingView } from './pages';
import { useLayoutContext } from '../../../api';


export const SettingsView = (props: { category: string, onClick?: (category: string, item: any) => void }) => {

    const [_peerId, _homePath, applicationProps] = useLayoutContext();

    if (props.category === 'account') {
        return <AccountSettingView {...props}></AccountSettingView>
    }
    if (applicationProps.settings) {
        let children = applicationProps.settings.flatMap((item) => item.children).filter((item, _index) => item.code === props.category);
        if (children && children.length > 0) {
            return children[0].element;
        } else {
            return (
                <Container>无效的代码</Container>
            );
        }
    } else {
        return (
            <Container>无效的代码</Container>
        );
    }
}

export default SettingsView;

const Container = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`;
